<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS&middot;Hello AngularJS</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.css">
    <style>
        .demo{
            margin-bottom:10px;
        }
    </style>
</head>
<body>

 <div class="container">
     <div class="row">
         <nav class="navbar navbar-default navbar-static-top">
             <div class="container-fluid">
                 <div class="navbar-header">
                     <a class="navbar-brand" href="../index.html">首页</a>
                 </div>
                 <ul class="nav navbar-nav">
                    <li class="active"><a href="javascript:void(0)">Link</a></li>
                    <li><a href="javascript:void(0)">Link2</a></li>
                 </ul>
             </div>
         </nav>
     </div>
     <div class="row demo">
         <h3>AngularJS IOC依赖注入示例:平方计算器</h3>
         <div ng-app="mainApp" ng-controller="CalcController">
             <p>Enter a number: <input type="number" ng-model="number" />
                 <button ng-click="square()"><b>X<sup>2</sup></b></button>
             <p>Result: {{result}}</p>
         </div>
     </div>
 </div>
 </div>
</body>
</html>
<script src="http://cdn.bootcss.com/angular.js/1.3.8/angular.js" type="text/javascript"></script>
<script>
    var mainApp = angular.module("mainApp", []);

    //提供者所使用的AngularJS内部创建过程中配置阶段的服务，工厂等(相AngularJS引导自身期间)。
    //下面提到的脚本，可以用来创建，我们已经在前面创建MathService。
    //提供者是一个特殊的工厂方法以及get()方法，用来返回值/服务/工厂。
    mainApp.config(function($provide) {
        $provide.provider('MathService', function() {
            this.$get = function() {
                var factory = {};
                factory.multiply = function(a, b) {
                    return a * b;
                }
                return factory;
            };
        });
    });

    //值是简单的JavaScript对象，它是用来将值传递过程中的配置相位控制器。
    mainApp.value("defaultInput", 5);

    //工厂是用于返回函数的值。它根据需求创造值，每当一个服务或控制器需要。它通常使用一个工厂函数来计算并返回对应值
    mainApp.factory('MathService', function() {
        var factory = {};
        factory.multiply = function(a, b) {
            return a * b;
        }
        return factory;
    });

    //服务是一个单一的JavaScript包含了一组函数对象来执行某些任务。服务使用service()函数，然后注入到控制器的定义。
    mainApp.service('CalcService', function(MathService){
        this.square = function(a) {
            return MathService.multiply(a,a);
        }
    });

    //常量用于通过配置相位值考虑事实，值不能使用期间的配置阶段被传递。
    mainApp.constant("configParam", "constant value");

    mainApp.controller('CalcController', function($scope, CalcService, defaultInput) {
        $scope.number = defaultInput;
        $scope.result = CalcService.square($scope.number);

        $scope.square = function() {
            $scope.result = CalcService.square($scope.number);
        }
    });
</script>
